import { useEffect, useState, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Radio, Button, Modal, App } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import loadable from '@loadable/component';
import { useHistory } from 'react-router-dom';

import useDevice, { DEVICES } from '@/hooks/useDevice';
import WxPayDialog from './WxPayDialog';
import ZfbPayDialog from './ZfbPayDialog';
import { setStore } from '@/reducers/common';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));

export default props => {
    const initState = () => ({
        type: '',
        agree: false,
    });
    const [state, setState] = useState(initState);
    const { payDialogOpen=false, payInfo={} } = useSelector(s => s.common);
    const isPc = DEVICES.DESKTOP === useDevice();
    const dispatch = useDispatch();
    const { message } = App.useApp();
    const history = useHistory();

    const onCancel = () => {
        setState(o => ({...o, type: '', agree: false}));
        dispatch(setStore({payDialogOpen: false}));
    };
    const onOk = () => {
        message.destroy();
        const {type, agree} = state;
        if(!type) return message.error(`请选择支付方式`);
    };

    const toPayList = () => {

        onCancel();
    };

    const cancelPay = () => {
        onCancel();
    };

    return (
        <Modal
            open={payDialogOpen}
            rootClassName={styles['modal-root']}
            closable={false}
            maskClosable={false}
            header={null}
            footer={null}
            destroyOnHidden={true}
            width={360}
        >
            <div className={styles['container']}>
                <Button onClick={onCancel} className={styles['close']} size="small" type="text" icon={<CloseOutlined/>}></Button>
                <div className={styles['header']}>支付金额：{payInfo?.price||0}</div>

                <div className={styles['radio-group']}>
                    <Radio.Group
                        style={{width: '100%'}}
                        onChange={e => setState(o => ({...o, type: e.target.value}))}
                        value={state.type}
                        options={[
                            {
                                value: 'wx',
                                label: <div className={styles['radio']}>
                                    <div className={styles['prefix']}><img src="/images/wx_pay_icon.png" alt="微信支付" />微信支付</div>
                                    <div className={`${styles['suffix']} ${'wx' === state.type ? styles['active'] : ''}`}>{'wx' === state.type ? <IconFont name="icon-cgou-xian"/> : ''}</div>
                                </div>,
                            },
                            {
                                value: 'zfb',
                                label: <div className={styles['radio']}>
                                    <div className={styles['prefix']}><img src="/images/zfb_pay_icon.png" alt="支付宝支付" />支付宝支付</div>
                                    <div className={`${styles['suffix']} ${'zfb' === state.type ? styles['active'] : ''}`}>{'zfb' === state.type ? <IconFont name="icon-cgou-xian"/> : ''}</div>
                                </div>,
                            },
                        ]}
                    />
                </div>

                <div className={styles['footer']}>
                    {
                        !state.type ?
                            <Button block shape="round" type="primary" size="large" onClick={onOk}>立即支付</Button>
                            :
                            (
                                'zfb' === state.type ?
                                    <ZfbPayDialog
                                        payInfo={payInfo}
                                        isPc={isPc}
                                    >
                                        <Button block shape="round" type="primary" size="large" onClick={onOk}>立即支付</Button>
                                    </ZfbPayDialog>
                                    :
                                    <WxPayDialog
                                        onOk={toPayList}
                                        onCancel={cancelPay}
                                        payInfo={payInfo}
                                        isPc={isPc}
                                    >
                                        <Button block shape="round" type="primary" size="large" onClick={onOk}>立即支付</Button>
                                    </WxPayDialog>
                            )
                    }
                </div>
            </div>
        </Modal>
    )
}
